import { Form, Input, Button, Checkbox, Radio, Modal } from 'antd';

import { useEffect, useState } from 'react';

export default function onlineRecharge(props: any) {
  const [visible, setvisible] = useState(false);
  const [inputAmount, setinputAmount] = useState<string | number>('200');
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  useEffect(() => {
    console.log('>>>', props);
  }, []);

  const onValuesChange = (val: any) => {
    if (Object.keys(val)[0] === 'selAmount') {
      form.setFieldsValue({
        inputAmount: +val.selAmount,
      });
    }
  };

  return (
    <Modal
      visible={props.isModalVisible}
      title="线上充值"
      footer={null}
      onCancel={() => {
        props.cancle();
      }}
    >
      <Form
        form={form}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{
          selAmount: '2000',
          playType: 'Wechat',
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        onValuesChange={onValuesChange}
      >
        <Form.Item name="inputAmount" rules={[{ required: true, message: '请输入你的充值金额' }]}>
          <Input suffix="元" value={inputAmount} />
        </Form.Item>
        <Form.Item name="selAmount">
          <Radio.Group>
            <Radio.Button value="2000">2000</Radio.Button>
            <Radio.Button value="4000">4000</Radio.Button>
            <Radio.Button value="6000">6000</Radio.Button>
            <Radio.Button value="8000">8000</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="playType" rules={[{ required: true, message: 'Please input your username!' }]}>
          <Radio.Group>
            <Radio.Button value="Wechat">微信</Radio.Button>
            <Radio.Button value="AliPay">支付宝</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item className="f">
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <Button
            htmlType="button"
            onClick={() => {
              props.cancle();
            }}
          >
            取消
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
}
